今天要寫的主題是搜尋框變形動畫
代表搜尋的放大鏡 icon按下後會拉伸為搜尋框的效果
一樣把基本架構寫好
input 是做為搜尋框使用， span 則是放大鏡 icon 的本體，放大鏡的棍子則用偽元素來做

<div class="container">
  <div class="centered-search">
    <input type="text">
    <span></span>
  </div>
</div>

然後設定好基本的 css

body {
  background: #262626;
}
/*讓頁面上的 box 邊框不影響元素寬度*/
* {
  box-sizing: border-box;
}

.centered-search {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.centered-search input {
  border: none;
  background: none;
  z-index: 1;
  width: 1.5em;
  height: 1.5em;
  color: transparent;
  transition: all 0.3s ease-in 0.3s;
  font-size: 1.2em;
  line-height: 1.2em;
}

然後針對 input 跟 span增加 transition 的樣式

/*hover到輸入框 游標顯示的樣式*/
.centered-search input:hover {
  cursor: pointer;
}

/*hover以後+按輸入框 游標顯示的樣式*/
.centered-search input:hover:focus {
  cursor: text;
}

.centered-search input:focus {
  width: 100%;
  outline: none;
  background: none;
  color: #fff;
  padding: 2px 12px;
/*   border:2px solid #ff4141;
  border-radius:1.5em;  */
}

.centered-search input:focus + span {
  width: 100%;
  height:1.8em;
  border: 2px solid #ff4141;
}

/*按下搜尋時 放大鏡的棍棍消失*/
.centered-search input:focus + span::before {
  width: 2px;
  opacity: 0;
  transition: all 0.3s ease-in 0.3s;
}

/*放大鏡的圈圈*/
.centered-search span {
  z-index: -1;
  width: 1.5em;
  height: 1.5em;
  border: 2px solid #fff;
  position: absolute;
  border-radius: 1.5em;
  left: 0;
  top: 0;
}

/*放大鏡的棍棍*/
.centered-search span::before {
  transition: all 0.3s ease-in 0.3s;
  /*transform-orgin 設定旋轉基準點*/
  transform-orgin: left top;
  content: "";
  position: absolute;
  width: 0.8em;
  height: 5px;
  border-radius: 5px;
  background: #fff;
  transform: rotate(45deg) translate(1.5em, 3px);
}

到這邊就完成了
其實今天的內容是純粹transition的動態效果XD
不是有keyframes的css animation

附上本次的 codepen 如下
https://codepen.io/UHU/pen/QZxeRG